<template>
    <div class="paging">
        <div class="paging-container">
            <div class="page-prev">
                <a href="/page/1/">上一页</a>
            </div>    
            <div class="page-next">
                <a href="/page/2/">下一页</a>
            </div>
        </div>
    </div>
</template>
<script type="text/babel">
    import { formatDate } from 'framework/utils/utils.js';
    export default{
        props:['list'],
        data(){
            return {
                isFinish: false, isLoading: false, pageIndex: 1, pageSize: 10,
            }
        },
        methods: {
            fetch(){
                this.$http.get(`${location.origin}/list?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`).then(res => {
                    console.log('res', res);
                    if(res.data.list && res.data.list.length){
                        this.total = res.data.total;
                        this.list = this.list.concat(res.data.list);
                    }else{
                        this.isFinish = true;
                    }
                    this.isLoading = false;
                });
            }, loadPage(){
                if(! this.isFinish && ! this.isLoading){
                    this.isLoading = true;
                    this.pageIndex ++;
                    setTimeout(() => {
                        this.fetch();
                    }, 1500);
                }
            }
        }, mounted(){
            formatDate(new Date());
            window.addEventListener('scroll', () => {
                this.loadPage();
            }, false);
        }
    }
</script>
